<!--
 * @author: linj
 * @email: 993353454@qq.com
 * @Date: 2021-11-29 17:48:48
 * @description: no
-->
<template>
  <div class="edit-screen flex-column page">
    <div class="fixed-header flex0">
      <EditBar v-bind="obj.editBarC"
        @itemClick="itemClick"></EditBar>
    </div>
    <div class="flex1 p-r flex">
      <!-- 组件列表 -->
      <ComList v-bind="obj.comListC"
        @addItem="addItem"></ComList>
      <div class="flex1 p-r">
        <div class="page of-a ">
          <!-- 主界面 -->
          <div class="screen-main"
            :style="{width:tplData.width+'px',height:tplData.height+'px',transform: 'scale('+(tplData.scale||1)+')'}">
            <!-- 一级拖拽 -->
            <DragResize v-for="(item,index) in tplData.list"
              :key="index"
              v-bind="item.dragC"
              :parent-w="tplData.width"
              :parent-h="tplData.height"
              :parent-scale-x="tplData.scale"
              :parent-scale-y="tplData.scale"
              @mixinChange="ComChange($event,item)">
              <!-- 一级组件 -->
              <component :is="item.comName"
                v-bind="item.comC"
                class="of-h">
                <!-- 二级拖拽 -->
                <DragResize v-for="(item1,index) in item.children"
                  :key="index"
                  v-bind="item1.dragC"
                  :parent-w="item.dragC.w"
                  :parent-h="item.dragC.h"
                  :parent-scale-x="tplData.scale"
                  :parent-scale-y="tplData.scale"
                  @mixinChange="ComChange($event,item1)">
                  <!-- 二级组件 -->
                  <component :is="item1.comName"
                    v-bind="item.comC"
                    class="of-h">
                  </component>
                </DragResize>
              </component>
            </DragResize>
          </div>
        </div>
        <!-- 主界面长宽大小配置 -->
        <div class="view-bar flex">
          <el-form :inline="true"
            :model="tplData">
            <el-form-item label="长">
              <el-input class="ip-w"
                v-model.number="tplData.width"
                placeholder="长"></el-input>
            </el-form-item>
            <el-form-item label="高">
              <el-input class="ip-w"
                v-model.number="tplData.height"
                placeholder="高"></el-input>
            </el-form-item>
          </el-form>
          <el-slider class="scale-bar"
            v-model="tplData.scale"
            :step="0.02"
            :min="0.2"
            :max="1"></el-slider>
        </div>
      </div>
      <!-- 编辑组件设置 -->
      <EditCom :ref="el=>{refs.editCom=el}"
        v-bind="obj.editComC"
        @hideClick="hideClick"
        @updateComData="updateComData"></EditCom>
      {{a}}
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import { safeData, uuid } from 'lj-utils/j'
import { getObj } from '@/utils/struct'
import { useRoute } from 'vue-router'
import ComList from '@/components/ComList'
import DragResize from '@/components/DragResize'
import EditBar from '@/components/EditBar'
import EditCom from '@/components/EditCom'
onMounted(() => {
  console.log('mounted')
})
const route = useRoute()
const obj = reactive({})
const refs = reactive({})
// const list = reactive({})

// 模板数据
const tplData = reactive({
  key: '',
  name: '',
  width: 750,
  height: 1334,
  scale: 0.56,
  list: [{
    // 组件id
    id: uuid(),
    // 组件别名
    name: '组件名称',
    // 组件名
    comName: 'lj-text',
    comC: getObj('comC'),
    edit: getObj('textEdit'),
    localConfig: [],
    // 拖拽配置
    dragC: getObj('dragSize', {
      w: 500,
      h: 300
    }),
    children: [
    ]
  }],
})
// 组件列表
obj.comListC = {
  show: true,
  list: [],
}
// 当前选中item
console.error('tplData:', tplData.list[0])
// 编辑组件
obj.editComC = {
  show: true,
  item: { a: 123 }
}
// 工具栏配置
obj.editBarC = {
  list: [{
    icon: 'el-icon-back',
    name: '返回',
    type: 'Edit',
  }, {
    icon: 'el-icon-back',
    name: '新增',
    type: 'add',
  }, {
    icon: 'el-icon-back',
    name: '组件列表',
    type: 'toggle',
    key: 'comListC',
  }, {
    icon: 'el-icon-back',
    name: '右工具栏',
    type: 'toggle',
    key: 'editComC',
  }],
  cClass: 'pd-lr20',
}

const hideClick = (argData) => {
  console.error('hideClick', argData)
  obj.editComC.show = argData
}
function updateComData(argData) {
  // 样式
  let style = ''
  safeData(argData, 'edit.style', []).map(v => {
    style += v.key + ':' + v.value + ';'
  })
  argData.comC.style = style
  // 数据
  safeData(argData, 'edit.data', []).map(v => {
    argData.comC.data[v.key] = v.value
  })
}
const addItem = (argName) => {
  let temItem = {
    key: uuid(),
    comName: argName,
    comC: getObj('comC'),
    edit: getObj('textEdit'),
    dragC: getObj('dragSize', {
      w: 100,
      h: 30
    })
  }
  tplData.list.push(temItem)
  obj.editComC.item = temItem
}
const resizes = (argData, argItem) => {
  Object.assign(argItem.dragC, argData)
  // console.error('resizes', argItem, argData)
  obj.editComC.item = argItem
  // 测试子组件
  // refs.editCom.test()
}
const activated = (argData, argItem) => {
  // console.error('activated', argData, argItem)
  if (safeData(obj.editComC.item, 'dragC')) {
    obj.editComC.item.dragC.isActive = false
  }
  if (argData.isActive) {
    argItem.dragC.isActive = argData.isActive
    setTimeout(() => {
      obj.editComC.item = argItem
    }, 300)
  }
}
const itemClick = (argData) => {
  console.log(argData)
  switch (argData.type) {
    case 'back':
      break
    case 'add':
      addItem('lj-text')
      break
    case 'toggle':
      obj[argData.key].show = !obj[argData.key].show
      break
  }
}
console.log(route.query, typeof resizes, typeof activated)
</script>

<style lang="scss">
.edit-screen {
  .of-a {
    overflow: auto;
  }
  .screen-main {
    margin: auto;
    position: relative;
    background-color: rgba(0, 0, 0, 0.03);
    transform-origin: top left;
  }
  .view-bar {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1000;
    .scale-bar {
      width: 120px;
    }
    .ip-w {
      width: 70px;
    }
  }
}
</style>